<!DOCTYPE html>
<html>
<head>
    <title>ReCaptcha demo</title>

     <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="../dist/css/formValidation.css"/>

    <script type="text/javascript" src="../vendor/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../dist/js/formValidation.js"></script>
    <script type="text/javascript" src="../dist/js/framework/bootstrap.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3">
                <div class="page-header">
                    <h1>ReCaptcha demo</h1>
                </div>

                <form id="defaultForm" method="post" class="form-horizontal" action="target.php">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Captcha</label>
                        <div class="col-sm-9 captchaContainer">
                            <div id="recaptcha"></div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-9 col-sm-offset-3">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    // Replace "6Ld6bP0SAAAAAJ8Hv9NOf85OulTX0C_1vPKf_7XH" with your public key
    Recaptcha.create('6Ld6bP0SAAAAAJ8Hv9NOf85OulTX0C_1vPKf_7XH', 'recaptcha', {
         theme: 'white',
         callback: captchaLoaded
    });

    function captchaLoaded() {
        $('#defaultForm')
            .on('added.field.bv', function(e, data) {
                // The field "recaptcha_response_field" has just been added
                if (data.field === 'recaptcha_response_field') {
                    // Find the icon
                    var $parent = data.element.parents('.form-group'),
                        $icon   = $parent.find('.form-control-feedback[data-bv-icon-for="' + data.field + '"]');

                    // Move icon to other position
                    $icon.insertAfter('#recaptcha');
                }
            })
            // Add new field after loading captcha
            .bootstrapValidator('addField', 'recaptcha_response_field', {
                validators: {
                    notEmpty: {
                        message: 'The captcha is required and can\'t be empty'
                    },
                    remote: {
                        type: 'POST',
                        url: 'recaptcha.php',
                        message: 'The captcha is not valid',
                        data: function() {
                            return {
                                recaptcha_challenge_field: $('#defaultForm').find('[name="recaptcha_challenge_field"]').val()
                            };
                        },
                        delay: 1000
                    }
                }
            });
    };

    $('#defaultForm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        }
    });
});
</script>
</body>
</html>
